Desarrollo de una aplicación Visual Web JSF May 7, 2009

Posted by leofernadoc in 1.
2 comments

Desarrollo de una aplicación Visual Web JSF

En este tutorial, se utiliza el IDE NetBeans y JSF 1.2 (Woodstock) componentes para crear y ejecutar una simple aplicación web, web Hola. La aplicación de ejemplo le pide que introduzca un nombre y, a continuación, muestra un mensaje que usa ese nombre. En primer lugar, que la aplicación de esta página con un campo de entrada. Luego que se sustituya el campo de entrada con una lista desplegable de la cual el usuario puede elegir un nombre. La lista desplegable se rellena con nombres de una tabla de base de datos.

Duración prevista: 25 minutos

Contents Sumario

• Crear un proyecto
• Diseño de la Página
• Añadiendo Algunos Comportamientos
• Ejecutando la Aplicación
• Sustitución del campo de texto con una lista desplegable
• La creación de la base de datos
• Table Vinculante en la lista desplegable de la tabla de base de datos
• Añadiendo algunosComportamientos
• Ejecutando la Aplicación
• Cómo hacer más
• Resumen

Para seguir este tutorial, usted necesita el siguiente software y recursos.

Software o  recursos	Versión requerida
NetBeans IDE NetBeans IDE	Versión 6.5 de Java
Java Development Kit (JDK)	Versión 6 o versión 5
JavaServer Faces Componentes / Plataforma Java EE	o 1.2 con Java EE 5 * o 1.1 con J2EE 1.4
GlassFish Application Server	V2
Travel Database Base	Requerido

Para aprovechar las ventajas de la IDE NetBeans capacidades Java EE 5, utilice un servidor de aplicación que es totalmente compatible con la especificación Java EE 5, como el servidor de aplicaciones GlassFish V2 UR2. Si está usando un servidor diferente, consulte la Notas y preguntas más frecuentes de los problemas conocidos y soluciones. Para obtener información detallada acerca de los servidores soportados y plataforma Java EE, consulte la Notas.

También puede utilizar ICEfaces con este tutorial. ICEfaces es un marco integrado de aplicación AJAX que permite a los desarrolladores de aplicaciones Java EE para crear y desplegar fácilmente delgada cliente aplicaciones de Internet ricas (RIA), en Java puro. Para aprovechar las ventajas de la funcionalidad ICEfaces, descargar el plugin ICEfaces Proyecto de Integración en el Centro de actualizaciones NetBeans (Herramientas> Extensiones), y consultar el Woodstock de ICEfaces Porting Guía para obtener información sobre las solicitudes de portabilidad de Woodstock ICEfaces.

Creating a Project Crear un proyecto

1. Desde el menú principal, seleccione Archivo> Nuevo proyecto.
2. Nuevo proyecto en el asistente, seleccione Java Web de la lista de categorías y seleccione la aplicación Web de Proyectos lista. Haga clic en Siguiente.
3. Nombre del proyecto HelloWeb
4. (Opcional) Seleccione la carpeta de uso dedicado para el almacenamiento de Bibliotecas casilla y especifique la ubicación de la carpeta de las bibliotecas. Véase el Proyecto de Bibliotecas Compartido para obtener más información sobre esta opción.
5. Haga clic en Siguiente.
6. Seleccione el servidor al que desea implementar su aplicación. Sólo los servidores que están registrados con el IDE se enumeran.
7. Seleccione la versión de Java EE que desea utilizar con su solicitud y haga clic en Siguiente.
8. Seleccione el Visual Web JavaServer Faces marco y haga clic en FinalizarSu proyecto aparece con la página inicial Page1 se abren en la aplicación de Visual Designer.

Diseño de la Página

Para empezar, el diseño de una página como la que se muestra en la siguiente figura.

1. En la ventana Propiedades de Página1, tipo Hello Web en el Title de propiedad del cuadro de texto como se muestra en la siguiente figura.El Title de propiedad del valor aparece en la barra de título del navegador, cuando esta página (o proyecto) se despliega.

   Sugerencia: Puede acceder a las propiedades de un componente en la ventana Propiedades, seleccione el componente, ya sea en el diseño visual o la ventana del Navegador. To open the Navigator window, select Window > Navigating > Navigator. Para abrir la ventana del Navegador, seleccione Ventana> Navegación> Navegador.

   Puede acceder a una página de propiedades haciendo clic en un punto blanco en la página.

2. En la ventana del Navegador, expanda el nodo Página 1 y haga clic derecho en el nodo y elija Página1 Añadir atributo obligatorio, como ssen en la siguiente imagen.
3. Si el nodo de base de Woodstock en la ventana de la paleta no está expandido, expanda ahora.Todos los componentes que usa en este ejemplo son básicos en el Woodstock de la paleta.

   Si la paleta no está visible, elija Ventana> Paleta para visualizarlo.

4. Arrastre un componente Etiqueta Woodstock básicos de la sección de la paleta a la izquierda de la página en el diseñador visual, escriba Name: y pulse Intro.Tenga en cuenta que el componente de enganche a la red en la página. También tomamos nota de que el valor del text de propiedad en la ventana Propiedades de los cambios en Name:

   Sugerencia: Puede cambiar el componente a modo de edición al hacer clic derecho en el elemento y seleccionando Editar etiquetas de texto desde el menú emergente.

5. Arrastre un campo de texto Woodstock componente básico de la sección de la paleta en el diseñador visual, el tipo Enter Your Name y pulse Enter.
6. En la ventana Propiedades, cambie el id la propiedad del campo de texto de textField1 a nameField
7. Haga clic derecho en el campo de texto y selecciona Añadir componente vinculante del atributo.Al añadir un atributo obligatorio, el IDE crea métodos getter y setter para el componente.
8. Seleccione la etiqueta de componentes y en la ventana Propiedades, seleccione nameField como el for propiedad.
9. Arrastre un componente Botón a la derecha de la componente Campo de texto, escriba Say Hello y pulse Enter.

   Nota: Hay un problema conocido que afecta a la anchura de la componente JSF 1.2 Botón en IE7. La solución es colocar el botón en un componente de diseño de componentes (Grupo Guía, Grupo de Grupo, o Panel de Diseño). Cambiar el tamaño de la estructura componente redimensiona automáticamente el componente de botón.

10. Haga doble clic en el botón Añadir y elija los componentes del atributo obligatorio.
11. En la ventana Propiedades, cambie el botón del componente id de propiedad de button1 a helloButton
12. Arrastre un componente de texto a un lugar por debajo de la Etiqueta del componente.
13. Cambiar el texto estático del componente id de propiedad de staticText1 a helloText
14. Haga clic derecho en el componente de texto y selecciona Añadir atributo obligatorio.
15. Arrastre un componente Grupo de mensaje a un cabo de la manera in situ en la página, como en el marco del componente de texto.Adición de un componente Grupo de mensaje, que muestra los errores en tiempo de ejecución, entre otros tipos de mensajes, es útil para diagnosticar errores de programación.
16. En la barra de herramientas de edición, haga clic en JSP para cambiar a la JavaServer Pages (JSP) Fuente: Editor.Buscar en el código y observar cómo los cambios que realizó en la ventana Propiedades se guardan. Cuando una página es la primera muestra en el navegador, la página aparece exactamente como se indica en las etiquetas en la página JSP. Si su página ha frijol código que cambia el valor de la propiedad, tales cambios sólo aparecen en las solicitudes que se presenta en la página y, posteriormente, vuelve.

Añadiendo Algunos Comportamientos

En esta sección, añadir código para hacer que vuelva la página con el mensaje Hello entered-name Usted puede hacer esto mediante la adición de un controlador de eventos que cada vez que pide la aplicación se hace clic en el botón. Este evento establece el texto estático del componente text de propiedad a un «hola» mensaje y, a continuación, hace que la página que se vuelve para que el texto aparece.

1. En la barra de herramientas de edición, haga clic en Diseño para cambiar a la de Visual Designer.
2. Haga doble clic en el botón de componente.The Editing Area switches to the Java Editor and shows the page bean for Page1. The button’s event handler, helloButton_action , has been added to the page bean. El área de edición cambia a la de Java y muestra el Editor de la página de frijol para Página1. El botón del evento, helloButton_action se ha añadido a la página de frijol.
3. Replace the body of the helloButton_action method with the following lines of code (shown in bold ). Reemplace el cuerpo de la helloButton_action método con las siguientes líneas de código (que se muestra en negrita). Then press Alt-Shift-F to reformat the code. A continuación, pulse Alt + Mayúsculas + F para reformatear el código.
   

   Code Example 1: helloButton_action() Code Ejemplo de Código 1: helloButton_action () Código

   public String helloButton_action() { HelloButton_action public String () ( String name = (String)nameField.getText(); String name = (String) nameField.getText (); helloText.setText("Hello, " + name + "!"); helloText.setText ( "Hola," + nombre + "!"); return null; return null; } )

   The first line in bold gets the value of the text property for the nameField Text Field component using the getText method. La primera línea en negrita obtiene el valor del text para la propiedad nameField componente Campo de texto utilizando el getText método. That value is an object of type Object , which needs to be a string, so it is cast to a String object. Ese valor es un objeto de tipo Object que debe ser una cadena, por lo que se lanza a una String objeto. Then the object is assigned to the name variable. A continuación, el objeto es asignado a la name variable.

   The second line in bold sets the value of the text property for the helloText Static Text component. La segunda línea en negrita establece el valor del text para la propiedad helloText componente de texto. This value contains the name that the user entered into the nameField Text Field component. For example, if the user enters Fred , this line of code sets the Static Text component’s text property to Hello, Fred! Este valor contiene el nombre que el usuario entró en el nameField componente Campo de texto. Por ejemplo, si el usuario introduce Fred esta línea de código establece el texto estático del componente text a la propiedad Hello, Fred!

Running the Application Ejecutando la Aplicación

1. In the Java Editor, ensure that your Java code does not contain any errors. En el Editor de Java, asegúrese de que el código Java no contiene ningún error.Errors are indicated by red underlines or red boxes along the left side of the code. Your project will not build if there are errors in the code. Los errores se indican con color rojo o rojo destaca cajas a lo largo de la parte izquierda del código. Su proyecto de construir si no hay errores en el código.

   Tip: Hold the cursor over the red box on the left side of the code to see a description of the error. Sugerencia: Mantenga el cursor sobre el cuadro rojo en la parte izquierda del código para ver una descripción del error.

2. Click the Run Main Project button Haga clic en el botón Ejecutar proyecto principal . .

   Note: By default, the project has been created with the Compile on Save feature enabled, so you do not need to compile your code first in order to run the application in the IDE. Nota: Por defecto, el proyecto ha sido creado con la compilación en Guardar función habilitada, lo que no es necesario para compilar el código en primer lugar para ejecutar la aplicación en el IDE. For more information on the Compile on Save feature, see the Compile on Save section of the Creating, Importing, and Configuring Java Projects guide. Para más información sobre la característica de compilación en Guardar, consulte la sección Guardar en Compilar de la creación, importación, y configurar Java Proyectos guía.

3. Enter your name in the text field and click Say Hello. Escriba su nombre en el campo de texto y haga clic en Di Hola.«Hello your name » is then displayed below. «Hola, tu nombre» se despliega a continuación.

   The browser submits the form to the web server, which calls your web application. The application executes the button action method, updates the page elements, rerenders the same page with the changed data, and sends the page back to the web browser. The following figure is the result if the name submitted is Gus Townsend . El navegador presenta el formulario para el servidor web, lo que exige su aplicación Web. La aplicación se ejecuta en el botón de acción método, se actualiza la página de elementos, rerenders la misma página con los datos cambiados, y la envía de vuelta a la página del navegador web. El siguiente cifra es el resultado si el nombre es presentado Gus Townsend

   

Replacing the Text Field With a Drop Down List Sustitución del campo de texto con una lista desplegable

The remainder of this tutorial shows how to use a Drop Down List component instead of a Text Field to get user input, as shown in the following figure. El resto de este tutorial muestra cómo utilizar un componente de lista desplegable en lugar de un campo de texto para obtener entrada del usuario, como se muestra en la siguiente figura. This Drop Down List component gets its list of choices from the bundled PERSON database table. Esta lista desplegable componente obtiene su lista de opciones del paquete PERSON tabla de base de datos.

1. In the Editing toolbar, click Design to switch to the Visual Designer. En la barra de herramientas de edición, haga clic en Diseño para cambiar a la de Visual Designer.
2. In the Visual Designer, right-click the nameField Text Field component and choose Delete from the pop-up menu. En el Diseñador visual, haga clic con el botón nameField componente Campo de texto y elija Eliminar en el menú emergente.
3. Drag a Drop Down List component from the Woodstock Basic section of the Palette onto your page in the Visual Designer. Arrastre una lista desplegable de la Woodstock componente básico de la paleta en su página en el diseñador visual. Move the component into the area where the Text Field component was. Mover el componente en el área donde el campo de texto componente.Notice, as shown in the following figure, that the Navigator window shows a dropDown1 component and a dropDown1DefaultOptions object. The Drop Down List component’s items property identifies the object that contains the choices in the list. When you add a Drop Down List component to the page, the IDE creates a Default Options object ( dropDown1DefaultOptions ) and sets this object as the value of the Drop Down List component’s items property. Aviso, como se muestra en la siguiente figura, que muestra la ventana del Navegador dropDown1 un componente y una dropDown1DefaultOptions objeto. La lista desplegable del componente items de propiedad identifica el objeto que contiene las opciones de la lista. Cuando se agrega una lista desplegable a la componente página, el IDE crea un objeto predeterminado Opciones dropDown1DefaultOptions y conjuntos de este objeto como el valor de la lista desplegable del componente items de propiedad. Only the Drop Down List component is visible in the Visual Designer. Sólo en la lista desplegable componente es visible en el Diseñador visual. The Default Options object merely supplies the choices that appear in the list. Las opciones por defecto se limita a los suministros objeto de las opciones que aparecen en la lista. Later in this tutorial, you modify the Drop Down List component to obtain its choices from a different source. Más adelante en este tutorial, modificará la lista de componentes para obtener su elección de una fuente diferente.

   

4. In the Properties window, change the component’s id to nameDropDown . En la ventana Propiedades, cambie el componente de la id a nameDropDown
5. Right-click the Drop Down List component and choose Add Binding Attribute . Haga clic derecho en la lista desplegable y seleccione Agregar componente vinculante del atributo.
6. Select the Label component and in the Properties window, select nameDropDown as the for property. Seleccione la etiqueta de componentes y en la ventana Propiedades, seleccione nameDropDown como el for propiedad.

Setting up the Database La creación de la base de datos

In this section, you set up the travel database and MySQL database server in the IDE. En esta sección, usted creó la base de datos de viaje y servidor de base de datos de MySQL en el IDE.

1. Make sure that the MySQL database server is installed and running on your machine. Asegúrese de que el servidor de base de datos de MySQL está instalado y funcionando en su máquina. For more information about connecting to a MySQL database, see Connecting to a MySQL Database Para obtener más información acerca de la conexión a una base de datos MySQL, consulte Conexión a una base de datos de MySQL
2. In the Services window, right-click the MySQL Server node and choose Create Database. En la ventana Servicios, haga clic derecho en el nodo servidor MySQL y seleccione Crear base de datos.The Create New Database dialog box opens. Crear la nueva base de datos abre el cuadro de diálogo.

   

3. From the drop down list, select Sample database: travel and click OK. De la lista desplegable, seleccione la base de datos de muestra: los viajes y haga clic en Aceptar.In the Services window, the Travel database appears under the MySQL Server node. En la ventana Servicios, el viaje aparece en la base de datos del servidor MySQL nodo.

   

Binding the Drop Down List to the Database Table Vinculante en la lista desplegable de la tabla de base de datos

The Services window, which appears on the left side of the IDE workspace, includes a Databases node. La ventana Servicios, que aparece en la parte izquierda de la IDE de trabajo, bases de datos incluye un nodo. The Databases node shows all the database drivers and connections that have been added to the IDE. Bases de datos muestra el nodo de la base de datos todos los controladores y las conexiones que se han añadido al IDE.

The NetBeans IDE comes with a sample Travel database. El IDE NetBeans viene con una base de datos de muestra de viajes. The Travel database appears under the Databases node. La base de datos de viajes aparece bajo el nodo Bases de datos. In this section of the tutorial, you use the person table from the Travel database to supply the choices for the Drop Down List component. En esta sección del tutorial, se utiliza la person de la mesa de viaje para abastecer a la base de datos de opciones para la lista de componentes.

1. In the Services window, expand the Databases node and check if the Travel database is connected. En la ventana Servicios, expanda el nodo Bases de datos y comprobar si la base de datos de viajes está conectado.If the jdbc node for the travel database’s badge is broken and you cannot expand the node, the IDE is not connected to the database. Si el nodo jdbc para la base de datos de la tarjeta de viaje se encuentra dañado y no se puede expandir el nodo, el IDE no está conectado a la base de datos. To connect to the TRAVEL database, right-click the jdbc node for the travel database connection and choose Connect from the pop-up menu. Para conectarse a la base de datos VIAJES, haga clic derecho en el nodo jdbc para la conexión de base de datos de viaje y elija Conectar en el menú emergente.
2. Expand the travel database’s Tables node. Ampliar la base de datos de viajes del nodo Tablas.Under Tables, you see nodes for each table in the database, such as carrental and flight . En virtud de los cuadros, puede ver los nodos de cada cuadro en la base de datos, tales como carrental y flight The following figure shows the Runtime window with the Tables node expanded. La siguiente figura muestra la ventana de tiempo de ejecución de los cuadros con el nodo ampliado.

   

3. Drag person from the Services window and drop it on the Drop Down List. Arrastre person de la ventana Servicios y suéltelo en la lista desplegable.The display on the list changes from item 1 to abc , indicating that the list is displaying bound data and that the data being displayed is of the type String . La pantalla en la lista de cambios item 1 a abc lo que indica que la lista se muestra la envolvente de datos y que los datos que se muestra es del tipo String

   The IDE adds a nonvisual personDataProvider component for the database table. The personDataProvider component appears in the Navigator window. El IDE nonvisual personDataProvider añade un componente de la tabla de base de datos. PersonDataProvider El componente aparece en la ventana del Navegador. The IDE also adds a personRowSet property to SessionBean1. El IDE también añade un personRowSet propiedad a SessionBean1.

4. Right-click the Drop Down List and choose Bind to Data from the pop-up menu. Haga clic derecho en la lista desplegable y seleccione Enlazar a los datos del menú emergente. The Bind to Data dialog box appears, as shown in the following figure. Enlazar a los datos aparece el cuadro de diálogo, como se muestra en la siguiente figura.
   When you bind data to a Drop Down List component, you must specify what to display in the list (the Display Field) and you must specify what values to use in the underlying program (the Value Field). Cuando los datos se unen a una lista de componentes, debe especificar que desea mostrar en la lista (de la pantalla de campo) y debe especificar qué valores de uso en el programa subyacente (el Valor de Campo). Typically, you want to display some meaningful value from the database table, such as a person’s name, but you want to use a unique identifier in the underlying program, such as the person’s ID. Normalmente, desea mostrar algunos significativo valor de la tabla de base de datos, tales como el nombre de una persona, pero usted quiere utilizar un identificador único en los programa, como el ID de la persona. With this application, however, you want to bind both the Value field and the Display field to the same database column, the person.name column, as described in the next two steps. Con esta aplicación, sin embargo, que quiere obligar tanto el campo Valor de la pantalla y sobre el terreno a la misma base de datos de la columna, la columna person.name, tal como se describe en los próximos dos pasos.
5. Set the Value field in the dialog box to person.name , leave the Display field set to person.name , and click OK. Establezca el campo Valor en el cuadro de diálogo para person.name deje el campo Mostrar ajustado a person.name y haga clic en Aceptar.

Adding Some Behavior Algunos añadiendo Comportamiento

1. In the Visual Designer, double-click the Button component. En el Diseñador visual, haga doble clic en el botón de componente.The Editing Area switches to the Java Editor and moves to the helloButton_action method. El área de edición cambia a la de Java Editor y se mueve a la helloButton_action método.
2. Replace the body of the helloButton_action method with the following code (shown in bold ). Reemplace el cuerpo de la helloButton_action método con el siguiente código (que se muestra en negrita).
   

   Code Example 2: helloButton_action Replacement Code Código Ejemplo 2: Sustitución helloButton_action Código

   public String helloButton_action() { HelloButton_action public String () ( String name = (String)nameDropDown.getSelected(); String name = (String) nameDropDown.getSelected (); String splitnames[] = name.split(","); Splitnames cadena [] = name.split (","); helloText.setText("Hello, " + splitnames[1] + "!"); helloText.setText ( "Hola," + splitnames [1] + "!"); return null; return null; } )

   
   The first line uses the getSelected method to get the current value of the Drop Down List, which is the currently selected name in the list. La primera línea utiliza la getSelected método para obtener el valor actual de la lista desplegable, que es el nombre seleccionado en la lista.

   Because data is stored in the database as lastname , firstname , the string must be modified before it is displayed. Porque los datos se almacenan en la base de datos como apellido, nombre, la cadena debe ser modificado antes de ser mostrada. Otherwise, the application will print «Hello, lastname , firstname !» En caso contrario, la solicitud de impresión «Hola, apellido, Nombre!» The second line uses the split method to split the string into an array, using the comma as a delimiter. La segunda línea utiliza la split método para dividir la cadena en un array, usando la coma como delimitador. The first item in the array (at position 0) contains the last name, and position 1 contains the first name. El primer tema de la serie (en la posición 0) contiene el último nombre, y la posición 1 contiene el primer nombre.

   In the third line, the text property for the Static Text component is set to a value that includes the first name. En la tercera línea, el text de propiedad para el componente de texto tiene un valor que incluye el primer nombre.

   Note: This method assumes that all values in this table are in the format lastname, firstname . Nota: Este método asume que todos los valores en esta tabla están en el formato de apellido, Nombre. It does not robustly handle strings that do not follow this format. No manejar con firmeza las cadenas que no siguen este formato.

3. Add the following code to the prerender method. Agregue el código siguiente a la prerender método. This code sets the first item in the list as the default selection. Este código establece el primer punto en la lista como la selección predeterminada.
   

   Code Sample 3: prerender Method Code Ejemplo de código 3: Método prerender Código

   public void prerender() { Public void prerender () ( // If no selection, set default selection / / Si no hay selección, sistema de selección por defecto if (nameDropDown.getSelected() == null) { if (nameDropDown.getSelected () == null) ( personDataProvider.cursorFirst(); personDataProvider.cursorFirst (); nameDropDown.setSelected nameDropDown.setSelected ((String)personDataProvider.getValue("person.name")); ((String) personDataProvider.getValue ( "person.name")); } ) } )

Running the Application Ejecutando la Aplicación

1. Click the Run Main Project button. Haga clic en el botón Ejecutar proyecto principal.

   Note: By default, the project has been created with the Compile on Save feature enabled, so you do not need to compile your code first in order to run the application in the IDE. Nota: Por defecto, el proyecto ha sido creado con la compilación en Guardar función habilitada, lo que no es necesario para compilar el código en primer lugar para ejecutar la aplicación en el IDE. For more information on the Compile on Save feature, see the Compile on Save section of the Creating, Importing, and Configuring Java Projects guide. Para más información sobre la característica de compilación en Guardar, consulte la sección Guardar en Compilar de la creación, importación, y configurar Java Proyectos guía.

2. Select a name from the list and click Say Hello. Seleccione un nombre de la lista y haga clic Di Hola.The browser sends the Drop Down List component’s selected value to the server, and the server executes the button’s helloButton_action method. El navegador envía la lista desplegable, seleccione el valor del componente en el servidor, el servidor y ejecuta el botón de helloButton_action método.